<template>
    <div class="overflow-y-scroll h-96 min-h-min">
        <el-table :data="props.tableData" style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" fixed="left" width="50" align="center" />
            <el-table-column prop="WorkOrderName" label="工单名称" width="150" align="center" />
            <el-table-column prop="OrderNumber" label="工单编号" width="150" align="center" />
            <el-table-column label="处理等级" width="150" align="center">
                <template #default="scope">
                    <el-tag :type="scope.row.Level == '1' ? 'warning' : scope.row.Level == '2' ? 'success' : 'danger'"
                        :effect="scope.row.Level == '1' ? 'plain' : scope.row.Level == '2' ? 'light' : 'dark'">
                        {{ scope.row.Level == "1" ? "较低" : scope.row.Level == "2" ?
                            "中等" : "紧急" }}
                    </el-tag></template>
            </el-table-column>
            <el-table-column width="150" label="状态" align="center" v-if="props.activeTab != 1">
                <template #default="scope">
                    <el-tag v-if="scope.row.DueDate < getDay() || scope.row.Status == '0'" type="danger">未完成</el-tag>
                    <el-tag :type="scope.row.Status == '1' ? 'warn' : 'success'" v-else>
                        {{ scope.row.Status == '1' ? '已完成' : '进行中' }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="Income" label="收入" width="150" align="center" />
            <el-table-column prop="CreatedDate" label="创建日期" width="150" align="center" />
            <el-table-column prop="DueDate" label="截止日期" width="150" align="center" v-if="props.activeTab != 1" />
            <el-table-column prop="WorkOrderDescription" label="备注" align="center" />
            <el-table-column fixed="right" label="操作" align="center" width="250">
                <template #default="scope">
                    <el-button link type="warning" size="small" @click.prevent="openUpdata(scope.row)"
                        v-if="props.activeTab != 4">
                        <el-icon>
                            <EditPen />
                        </el-icon>
                        编辑
                    </el-button>
                    <el-button link type="primary" size="small" @click.prevent="getDetail(scope.row)">
                        <el-icon>
                            <ChatDotRound />
                        </el-icon>
                        详情
                    </el-button>
                    <el-button link type="warning" size="small" @click.prevent="giveWorkOrder(scope.row)"
                        v-if="props.activeTab == 1">
                        <el-icon>
                            <EditPen />
                        </el-icon>
                        工单分配
                    </el-button>
                    <el-button link type="warning" size="small" @click.prevent="openApprover(scope.row)"
                        v-if="props.activeTab == 2">
                        <el-icon>
                            <EditPen />
                        </el-icon>
                        工单审核
                    </el-button>
                    <el-button link type="danger" size="small" @click.prevent="deleteRow(scope.row)">
                        <el-icon>
                            <DeleteFilled />
                        </el-icon>
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script setup>
import { DeleteFilled, Upload, EditPen, Hide, ZoomIn, Delete, Plus, Search, Lock, ChatDotRound } from '@element-plus/icons-vue'
import { defineEmits, defineProps, reactive } from 'vue'
import { formatDate } from '../utils/auth.js'
import { useTabsStore } from '../store/store'
const useData = useTabsStore()
const props = defineProps({
    tableData: {
        type: Array,
        default: () => []
    },
    activeTab: {
        type: Number,
        default: 1
    }
})
const state = reactive({
    selectedIds: [],
    editForm: {}
})
const emits = defineEmits(['getSelectedIds', 'giveWorkOrder', 'openUpdata', 'openApprover', 'deleteRow', 'getDetail'])
// 选择
const handleSelectionChange = (selection) =>
{
    if (state.activeTab != 1) {
        state.selectedIds = selection.map(item => item.WorkOrderID);
        state.selectedAssignmentID = selection.map(item => item.AssignmentID);
    } else {
        state.selectedIds = selection.map(item => item.WorkOrderID);
    }
    emits('getSelectedIds', state.selectedIds, state.selectedAssignmentID ? state.selectedAssignmentID : null)
}
// 工单分配
const giveWorkOrder = (row) =>
{
    state.editForm = {
        assignmentID: row.AssignmentID,
        workOrderID: row.WorkOrderID,
        workOrderName: row.WorkOrderName,
        workOrderDescription: row.WorkOrderDescription,
        income: row.Income,
        dueDate: row.DueDate,
        workOrderLevel: row.Level,
        assignedToUserID: row.AssignedUserID,
        createdUserID: useData.getUserData().userID,
    }
    emits('giveWorkOrder', state.editForm)
}
// 打开编辑
const openUpdata = (row) =>
{
    state.editForm = {
        assignmentID: row.AssignmentID ? row.AssignmentID : null,
        workOrderName: row.WorkOrderName ? row.WorkOrderName : null,
        workOrderDescription: row.WorkOrderDescription ? row.WorkOrderDescription : null,
        income: row.Income ? row.Income : null,
        dueDate: row.DueDate ? row.DueDate : null,
        workOrderStatus: row.Status ? row.Status : null,
        assignedToUserID: row.AssignedToUserID ? row.AssignedToUserID : null,
        workOrderLevel: row.Level ? row.Level : null,
        workOrderID: row.WorkOrderID ? row.WorkOrderID : null,
        createdDate: row.CreatedDate ? row.CreatedDate : null,
        approver: row.Approver ? row.Approver : null
    }
    state.editForm.dueDate = formatDate(state.editForm.dueDate)
    emits('openUpdata', state.editForm)
}
// 打开工单审批窗口
const openApprover = (row) =>
{
    state.editForm = {
        assignmentID: row.AssignmentID,
        workOrderName: row.WorkOrderName,
        workOrderDescription: row.WorkOrderDescription,
        income: row.Income,
        dueDate: row.DueDate,
        workOrderStatus: row.Status,
        assignedToUserID: row.AssignedToUserID,
        workOrderLevel: row.Level,
        workOrderID: row.WorkOrderID,
        createdDate: row.CreatedDate,
        approver: useData.getUserData().userID
    }
    emits('openApprover', state.editForm)
}
// 打开详情
const getDetail = (row) =>
{
    emits('getDetail', row)
}
// 获取今天日期
const getDay = () =>
{
    let now = new Date();
    let date = now.toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit'
    }).replace(/\//g, '-');
    return date;
}
const getAvatarUrl = (url) =>
{
    return `${import.meta.env.BASE_IP}:8888/${url}`

}
const deleteRow = (row) =>
{
    emits('deleteRow', row)
}
</script>

<style lang="scss" scoped></style>